<template>
  <div class="sjplatformSelectForm">
    <el-form :inline="true">
      <el-form-item label="姓名：">
        <el-input v-model="userTable.queryCondition.realName" placeholder="请输入姓名..." />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchData">查询</el-button>
      </el-form-item>
    </el-form>
  </div>
  <div class="sjplatformtable">
    <el-table ref="multipleTableRef" :data="userTable.tableData" :highlight-current-row="isSingle"
      @current-change="handleCurrentRowChange" v-loading="loading" stripe border style="width: 100%">
      <template v-if="isSingle == false">
        <el-table-column type="selection" width="100" />
      </template>

      <el-table-column prop="realName" label="姓名" />
    </el-table>
    <el-pagination layout="prev, pager, next" :total="userTable.total" :page-size="pageSize" :current-page="currentPage"
      @current-change="handleCurrentChange" />
  </div>
</template>

<script lang="ts" setup>
import { ref, watch, defineProps, onUnmounted } from "vue";
import { ElTable } from "element-plus";
import { useOrgTree } from "../../../hooks/SystemManager/Org/useOrgTree";
import { useUserTable } from "../../../hooks/SystemManager/User/useUserTable";
import emitter from "../../../utils/emitter";

const currentRow = ref();
let multipleTableRef = ref<InstanceType<typeof ElTable>>();
let receivedProps = defineProps(["initSelectedUser"]);
let initSelectedUser = receivedProps.initSelectedUser;
let isSingle = ref(initSelectedUser.isSingle);

function init(initData) {
  isSingle.value = initData.single;
  if (isSingle.value) {
    multipleTableRef.value!.setCurrentRow(undefined);
  } else {
    if (multipleTableRef.value) {
      multipleTableRef.value!.clearSelection();
    }
  }

  SetSelectedRow(initData.selectedrow);
}

function SetSelectedRow(selectedrow: []) {
  if (selectedrow.length > 0) {
    if (isSingle.value) {
      let index = 0;
      let row = userTable.tableData.find(
        (user) => user.id == selectedrow[index]
      );
      if (row) {
        handleCurrentRowChange(row);
      }
    } else {
      for (let index in selectedrow) {
        let row = userTable.tableData.find(
          (user) => user.id == selectedrow[index]
        );
        if (row) {
          multipleTableRef.value!.toggleRowSelection(row, undefined);
        }
      }
    }
  }
}

const currentPage = ref(1);
const pageSize = ref(10); // 默认每页大小
const loading = ref(false);

// 机构树
const { orgStore, fetchData } = useOrgTree();
fetchData(); // 调用数据获取方法

const { userTable, queryData } = useUserTable(
  currentPage,
  pageSize
);
userTable.queryCondition.searchAll = true;
queryData().then(() => {
  init(initSelectedUser);
  userTable.queryCondition.searchAll = false;
});

watch(
  () => orgStore.selectedOrgNode?.id,
  (newId) => {
    userTable.queryCondition.orgId = newId;
    searchData();
  }
);

//单选
function handleCurrentRowChange(value) {
  if (isSingle.value && value) {
    currentRow.value = value;
    multipleTableRef.value!.setCurrentRow(value);
  }
}

//翻页事件
const handleCurrentChange = (newPage) => {
  currentPage.value = newPage;
  queryData().then(() => {
    init(initSelectedUser);
  }); // 根据当前页获取数据
};

//查询按钮
const searchData = async () => {
  loading.value = true;
  currentPage.value = 1;
  queryData().then(() => {
    init(initSelectedUser);
  });
  loading.value = false;
};

//供外部调用获取选择的项
emitter.on("confirmSelectedUser", () => {
  emitter.emit(
    "set-selected-user",
    isSingle.value
      ? currentRow.value
      : multipleTableRef.value.getSelectionRows()
  );
});

onUnmounted(() => {
  //组件卸载后解绑
  emitter.off("confirmSelectedUser");
});
</script>